import React from "react";
import Rx from "rxjs";
import {get_state} from "./category";

// import ObservableComponent from 'rxjs-react-component';

class MyComponent1 extends React.Component <{
  count: number;
},
{
}> {

  constructor(prop) {
    super(prop)
    this.state = {
      change1: null
    }
  }

  componentDidMount() {
    // console.trace();
    // console.log(this.constructor.toString())
    // console.log(this)
    console.log('MyComponent1 componentDidMount')

    // const MyComponent1 = document.getElementById('MyComponent1')
    // Rx.Observable.fromEvent(MyComponent1, 'click')
    //   .map(() => state => Object.assign({}, state, {count: state.count + 1}))
    //   .scan((state, changeFn) => changeFn(state), {count: 0})
    //   .subscribe((state) => {
    //     console.log(state)
    //     this.props.count = state.count
    //   });
    //
    // console.log(this.state)
  }

  componentDidUpdate() {
    console.log('MyComponent1 componentDidUpdate')
  }

  render() {
    return (
      <>
        <div id="MyComponent1" onClick={
          ()=> {
            get_state().subscribe(x=>console.log(x.get("foo")))
          }
        }>MyComponent1 {this.props.count}</div>
      </>
    )
  }
}


export function change1_Ob() {
  return Rx.Observable.fromEvent(document.getElementById('MyComponent1'), 'click')
        // .map(() => state => {
        //   console.log(state)
        //   return Object.assign({}, state, {count: state.count + 1})
        // } )
        // .scan((state, changeFn) => changeFn(state), {count: 0})
}

export default MyComponent1
